<template>
    <div class="screen">
        <div class="items-center">
            <div class="items-center-box" style="padding-right: 0.3rem;">
                <!-- 搜索框 -->
                <div class="items-center-box-item" v-for="(item, index) in screenData" :key="index">
                    <div v-if="item.type == 'search'" class="screen-search">
                        <div class="items-center-box-label">{{ item.label }}</div>
                        <el-input v-model="item.val"
                            :style="'width:' + item.width + 'rem;' + 'height:' + ((item.height != undefined) ? item.height : '0.38rem')"
                            placeholder="Please input" :suffix-icon="Search" size="large" />
                    </div>
                    <!-- 普通选择框 -->
                    <div v-if="item.type == 'select'" class="screen-select"
                        :style="{ '--height': item.height + 'rem' }">
                        <div class="items-center-box-label">{{ item.label }}</div>
                        <el-select v-model="item.val" @change="selectChange" popper-class="blueBack"
                            placeholder="Select" size="large"
                            :style="'width:' + item.width + 'rem;' + 'height:' + ((item.height != undefined) ? item.height : '0.38rem')">
                            <el-option v-for="optionsItem in item.options" :key="optionsItem.value"
                                :label="optionsItem.label" :value="optionsItem.value" />
                        </el-select>
                    </div>
                    <!-- 时间选择框 -->
                    <div v-if="item.type == 'select-time'" class="screen-select">
                        <div class="items-center-box-label">{{ item.label }}</div>
                        <screen-select-tiem :width="item.width + 'rem'" height="0.38rem"
                            class="screen-select-box" @childEvent="dateSelectTiem"></screen-select-tiem>
                        <screen-select :width="item.width + 'rem'" height="0.38rem" backgroundColorPrimary="FFFFFF"
                            colorPrimary="#1C1C1C" options="" placeholder="请选择结束时间"
                            style="font-size: 0.18rem; pointer-events:none"
                            :pointerevents="true"></screen-select>
                    </div>
                </div>
            </div>
            <div class="items-center-box">
                <div class="items-center-box-item" v-for="(item, index) in screenData" :key="index">
                    <div v-if="item.type == 'button'">
                        <el-button @click="buttonClick(item.label)" style="width: 1rem;height: 0.38rem; font-size: 0.14rem;" size="large"
                            :color="item.buttonColor || ''" :type="item.buttonType"
                            @mousedown="e => e.preventDefault()">{{
                    item.label }}</el-button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import screenSelect from '@/components/commonScreen/components/screenSelect.vue'
import screenSelectTiem from '@/components/commonScreen/components/screenSelectTiem.vue'
const props = defineProps({
    screenData: {
        type: Array,
        default: []
    },
})
const dateSelectTiem = (e) => {
    formData.signStartDate = transformTime(e.value)

}
const emits = defineEmits(['childEvent'])
const value = ref('')
const input = ref('')
// 使用defineEmits创建名称，接受一个数组

const buttonClick = (val) => {
    emits('childEvent', [props,val]);
}
</script>
<style lang="less" scoped>
@--height: var(--height);

:deep(.el-input__wrapper) {
    font-size: 0.14rem;
}
:deep(.el-input__inner) {
    height: @--height;
}

.blueBack {

    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background: #4180F7 !important;
        color: white;
    }
}

.screen {
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    border-radius: 0.05rem;
    padding: 0 0.5rem;
    margin-bottom: 0.31rem;
    border: 0.01rem solid #E8E8E8;
    background: #FFF;
    box-shadow: 0px 0px 0.04rem 0px #F0F4F5;

    .items-center {
        padding: 0.01rem 0;
        height: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .screen-select-box {
            opacity: 0;
            // height: 0.3rem;
            width: 1.6rem;
            position: relative;
            width: 0rem;
        }

        .items-center-box {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .items-center-box-item {
                display: flex;
            justify-content: flex-start;
            align-items: center;

            }

        }

        .items-center>div {
            // padding-right: 0.31rem;

        }

        .items-center-box-item>div {
            padding-right: 0.20rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .items-center-box-label {
            font-size: 0.14rem;
            padding-right: 0.2rem;
            white-space: nowrap,

        }
    }
}
</style>